<template>
  <div class="ui middle aligned center aligned grid">
    <div class="six wide column">
      <form class="ui form adduserform" @submit.prevent="onSubmit">
        <div class="field">
          <div class="ui left icon input">
            <i class="user icon"></i>
            <input
              type="text"
              name="email"
              v-model="newuser.email"
              placeholder="E-mail address"
              v-on:input="clearerrors"
              required
            />
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="user icon"></i>
            <input
              type="text"
              name="username"
              v-model="newuser.username"
              placeholder="User name"
              v-on:input="clearerrors"
              required
            />
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="lock icon"></i>
            <input
              type="password"
              name="password"
              v-model="newuser.password"
              placeholder="Password"
              v-on:input="clearerrors"
              required
            />
          </div>
        </div>
        <div class="field">
          <div class="ui left icon input">
            <i class="lock icon"></i>
            <input
              type="password"
              name="repassword"
              v-model="newuser.repassword"
              placeholder="re-Password"
              v-on:input="clearerrors"
            />
          </div>
        </div>
        <div class="ui error message" v-bind:class="{ 'shown': hasError }">{{ errors.message }}</div>
        <button id="savebtn" class="ui fluid large teal button">Save</button>
      </form>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { register } from "@/api/user"
export default {
  data() {
    return {
      newuser: {
        username: "",
        password: "",
        email: "",
        repassword: "",
      },
      errors: {},
    };
  },
  computed: {
    hasError() {
      if (JSON.stringify(this.errors) === "{}") {
        return false;
      } else {
        return true;
      }
    },
    ...mapState(["user"]),
  },
  methods: {
    clearerrors() {
      this.errors = {};
    },
    async onSubmit() {
      if (this.newuser.password != this.newuser.repassword) {
        this.errors = { message: "两次输入的密码不一样" };
        //seterror("两次输入的密码不一样")
        return;
      }
      const auth = this.user.auth;
      console.dir(auth);
      try {
        const { data } = await register(auth,this.newuser);
        console.log(data);
      } catch (error) {
        //console.log(error)
        this.hasError;
        console.dir(error);
        this.errors = error.response.data;
        //this.errors.status = error.response.status

        console.log(this.errors);
        this.hasError;
        this.$router2 = { user: null };
        console.log(this.$router2);
      }
      //解构数据，获取响应体data
    },
  },
};
</script>

<style>
.shown {
  display: block !important;
}
</style>